 <template>
 	<view class="container">
 		<!-- 自定义导航栏 -->
 		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
 			<view class="nav-back" @click="goBack">
 				<text class="back-icon">‹</text>
 			</view>
 			<view class="nav-title">订单支付</view>

 		</view>

 		<!-- 主要内容 -->
 		<view class="content">
 			<view class="success-icon">
 				<view class="icon-circle">
 					<text class="checkmark">✓</text>
 				</view>
 			</view>
 			<view class="success-text">支付成功</view>
 			<view class="payment-amount">{{ paymentAmount }}</view>
 			<view class="reservation-number">预约编号: {{ reservationNumber }}</view>

 			<view class="action-buttons">
 				<view class="primary-btn" @click="goHome">返回首页</view>
 				<view class="secondary-btn" @click="goToDetail">订单详情</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				statusBarHeight: 0,
 				paymentAmount: '39.90',
 				reservationNumber: '324252536363634'
 			};
 		},
 		onLoad(options) {
 			const systemInfo = uni.getSystemInfoSync();
 			this.statusBarHeight = systemInfo.statusBarHeight;
 			if (options.amount) {
 				this.paymentAmount = options.amount;
 			}
 			if (options.reservationNumber) {
 				this.reservationNumber = options.reservationNumber;
 			}
 		},
 		methods: {
 			goBack() {
 				uni.navigateBack();
 			},
 			goHome() {
 				uni.switchTab({
 					url: '/pages/index/index'
 				});
 			},
 			goToDetail() {
 				uni.navigateTo({
 					url: '/pages/order/detail'
 				});
 			}
 		}
 	};
 </script>

 <style scoped>
 	.container {
 		width: 100%;
 		height: 100vh;
 		background-color: #F5F7FA;
 		display: flex;
 		flex-direction: column;
 	}

 	.custom-nav {
 		height: 44px;
 		display: flex;
 		align-items: center;
 		background-color: #4A90E2;
 		position: relative;
 	}

 	.nav-back {
 		width: 44px;
 		height: 44px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.back-icon {
 		color: white;
 		font-size: 32px;
 		font-weight: bold;
 		line-height: 44px;
 	}

 	.nav-title {
 		flex: 1;
 		text-align: center;
 		color: white;
 		font-size: 18px;
 		font-weight: 500;
 	}

 	.nav-right {
 		width: 88px;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 		padding-right: 15px;
 	}

 	.nav-icon {
 		color: white;
 		font-size: 20px;
 		margin-left: 10px;
 	}

 	.content {
 		flex: 1;
 		background-color: white;
 		border-radius: 15px 15px 0 0;
 		margin-top: 10px;
 		padding: 60px 20px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}

 	.success-icon {
 		margin-bottom: 30px;
 	}

 	.icon-circle {
 		width: 100px;
 		height: 100px;
 		border-radius: 50px;
 		background-color: #4A90E2;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.checkmark {
 		color: white;
 		font-size: 60px;
 		font-weight: bold;
 	}

 	.success-text {
 		font-size: 20px;
 		color: #333;
 		margin-bottom: 20px;
 		font-weight: 500;
 	}

 	.payment-amount {
 		font-size: 36px;
 		font-weight: bold;
 		color: #333;
 		margin-bottom: 15px;
 	}

 	.reservation-number {
 		font-size: 14px;
 		color: #666;
 		margin-bottom: 50px;
 	}

 	.action-buttons {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}

 	.primary-btn {
 		width: 80%;
 		height: 45px;
 		background-color: #4A90E2;
 		color: white;
 		border-radius: 25px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 16px;
 		font-weight: 500;
 		margin-bottom: 15px;
 	}

 	.secondary-btn {
 		width: 80%;
 		height: 45px;
 		background-color: #E0E0E0;
 		color: white;
 		border-radius: 25px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 16px;
 		font-weight: 500;
 	}
 </style>